<template>
  <div id='pucircle' :style='size'>
    <chart ref='pucircle' :options='orgOptions' :style='size' :auto-resize='true'></chart>
  </div>
</template>

<script>
  import graphic from '../../node_modules/echarts/lib/util/graphic.js'

  export default {
    name: 'pucircle',
    data () {
      return {
        data: [
          {
            'max': 200,
            'value': 33,
            // 'name': '销售总览',
            'colorA': '#05D2C3',
            'colorB': '#2FD587',
            'title': '申请'
          },
          {
            'max': 200,
            'value': 18,
            // 'name': '销售总览',
            'colorA': '#05D2C3',
            'colorB': '#2FD587',
            'title': '变现'
          },
          {
            'max': 200,
            'value': 23,
            // 'name': '销售总览',
            'colorA': '#05D2C3',
            'colorB': '#2FD587',
            'title': '延续'
          },
          {
            'max': 200,
            'value': 33,
            // 'name': '销售总览',
            'colorA': '#05D2C3',
            'colorB': '#2FD587',
            'title': '补办'
          },
          {
            'max': 200,
            'value': 18,
            // 'name': '销售总览',
            'colorA': '#05D2C3',
            'colorB': '#2FD587',
            'title': '注销'
          },
          {
            'max': 200,
            'value': 23,
            'name': '销售总览',
            'colorA': '#05D2C3',
            'colorB': '#2FD587',
            'title': '撤销'
          }
        ],
        numbers: {
          'max': 200,
          'value': 50,
          'name': '销售总览',
          'colorA': '#05D2C3',
          'colorB': '#2FD587'
        },
        axislineColor: new graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: '#05D2C3'
          },
          {
            offset: 1,
            color: '#2FD587'
          }
        ]),
        orgOptions: {},
        size: {
          width: '100%',
          height: '100%'
        }
      }
    },
    computed: {},
    mounted () {
      this.orgOptions = {
        backgroundColor: 'rgba(255, 255, 255, 0)',
        // grid: {
        //   top: '20%',
        //   left: '0%',
        //   right: '35%',
        //   bottom: '20%',
        //   containLabel: true
        // },
        title: {
          top: '0',
          left: 'center',
          text: '排污许可证',
          textStyle: {
            align: 'center',
            color: '#FFFFFF',
            fontSize: 15
          }
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        // toolbox: {
        //   feature: {
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        series: [
          {
            center: ['17.2%', '48%'], //  仪表的位置
            name: '刻度', //  仪表的名字
            type: 'gauge', //  统计图类型为仪表
            radius: '53.3%', // 统计图的半径大小
            min: 0, // 最小刻度
            max: 200, // 最大刻度
            splitNumber: 1, // 刻度数量
            startAngle: 180, // 开始刻度的角度
            endAngle: 0, // 结束刻度的角度
            axisLine: { // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(255,255,255,0)']
                ]
              }
            }, // 仪表盘轴线
            axisLabel: { // 仪表盘上的数据
              show: true,
              color: '#ffffff' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: false,
              splitNumber: 10, // 刻度的段落数
              lineStyle: {
                color: '#fff',
                width: 1 // 刻度的宽度
              },
              length: -20 // 刻度的长度
            }, // 刻度样式
            splitLine: { // 文字和刻度的偏移量
              show: false,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#fff'
              }
            },
            detail: {
              show: true,
              formatter: '件',
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: ['-10%', '-1%']
            } // 分隔线样式
          },
          {
            min: 0,
            max: this.data[0].max,
            radius: '52%',
            center: ['16.%', '48%'],
            startAngle: 180,
            endAngle: 0,
            name: this.numbers.name,
            type: 'gauge',
            axisLabel: {
              show: false
            },
            detail: {
              show: true,
              formatter: this.data[0].value,
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: [0, '-35%']
            },

            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [this.data[0].value / this.data[0].max, '#7CFC00'],
                  [1, '#DCDCDC']
                ]
              }
            },
            pointer: {
              show: false
            },
            itemStyle: {
              color: '#DCDCDC'
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: [{
              value: this.data[0].value
            }]
          },
          {
            min: 0,
            max: this.data[0].max,
            radius: '52%',
            center: ['16.%', '48%'],
            startAngle: 180,
            endAngle: 0,
            name: this.numbers.name,
            type: 'gauge',
            axisLine: { // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(255,255,255,0)']
                ]
              }
            }, // 仪表盘轴线
            axisLabel: { // 仪表盘上的数据
              show: false,
              color: '#ffffff' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: false,
              splitNumber: 10, // 刻度的段落数
              lineStyle: {
                color: '#fff',
                width: 1 // 刻度的宽度
              },
              length: -20 // 刻度的长度
            }, // 刻度样式
            splitLine: { // 文字和刻度的偏移量
              show: false,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#fff'
              }
            },
            detail: {
              show: true,
              formatter: this.data[0].title,
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: [0, '-125%']
            } // 分隔线样式
          },
          {
            center: ['50.6%', '48%'], // 仪表的位置
            name: '刻度', // 仪表的名字
            type: 'gauge', // 统计图类型为仪表
            radius: '53.3%', // 统计图的半径大小
            min: 0, // 最小刻度
            max: 200, // 最大刻度
            splitNumber: 1, // 刻度数量
            startAngle: 180, // 开始刻度的角度
            endAngle: 0, // 结束刻度的角度
            axisLine: { // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(255,255,255,0)']
                ]
              }
            }, // 仪表盘轴线
            axisLabel: { // 仪表盘上的数据
              show: true,
              color: '#ffffff' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: false,
              splitNumber: 10, // 刻度的段落数
              lineStyle: {
                color: '#fff',
                width: 1 // 刻度的宽度
              },
              length: -20 // 刻度的长度
            }, // 刻度样式
            splitLine: { // 文字和刻度的偏移量
              show: false,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#fff'
              }
            },
            detail: {
              show: true,
              formatter: '件',
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: ['-8%', '-1%']
            } // 分隔线样式
          },
          {
            min: 0,
            max: this.data[1].max,
            radius: '52%',
            center: ['49.5%', '48%'],
            startAngle: 180,
            endAngle: 0,
            name: this.numbers.name,
            type: 'gauge',
            axisLabel: {
              show: false
            },
            detail: {
              show: true,
              formatter: this.data[1].value,
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: [0, '-35%']
            },

            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [this.data[1].value / this.data[1].max, '#5CACEE'],
                  [1, '#DCDCDC']
                ]
              }
            },
            pointer: {
              show: false
            },
            itemStyle: {
              color: '#DCDCDC'
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: [{
              value: this.data[1].value
            }]
          },
          {
            min: 0,
            max: this.data[1].max,
            radius: '52%',
            center: ['49.5%', '48%'],
            startAngle: 180,
            endAngle: 0,
            name: this.numbers.name,
            type: 'gauge',
            axisLine: { // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(255,255,255,0)']
                ]
              }
            }, // 仪表盘轴线
            axisLabel: { // 仪表盘上的数据
              show: false,
              color: '#ffffff' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: false,
              splitNumber: 10, // 刻度的段落数
              lineStyle: {
                color: '#fff',
                width: 1 // 刻度的宽度
              },
              length: -20 // 刻度的长度
            }, // 刻度样式
            splitLine: { // 文字和刻度的偏移量
              show: false,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#fff'
              }
            },
            detail: {
              show: true,
              formatter: this.data[1].title,
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: [0, '-125%']
            }// 分隔线样式
          },
          {
            center: ['83.8%', '48%'], // 仪表的位置
            name: '刻度', // 仪表的名字
            type: 'gauge', // 统计图类型为仪表
            radius: '53.3%', // 统计图的半径大小
            min: 0, // 最小刻度
            max: 200, // 最大刻度
            splitNumber: 1, // 刻度数量
            startAngle: 180, // 开始刻度的角度
            endAngle: 0, // 结束刻度的角度
            axisLine: { // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(255,255,255,0)']
                ]
              }
            }, // 仪表盘轴线
            axisLabel: { // 仪表盘上的数据
              show: true,
              color: '#ffffff' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: false,
              splitNumber: 10, // 刻度的段落数
              lineStyle: {
                color: '#fff',
                width: 1 // 刻度的宽度
              },
              length: -20 // 刻度的长度
            }, // 刻度样式
            splitLine: { // 文字和刻度的偏移量
              show: false,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#fff'
              }
            },
            detail: {
              show: true,
              formatter: '件',
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: ['-12%', '-1%']
            } // 分隔线样式
          },
          {
            min: 0,
            max: this.data[2].max,
            radius: '52%',
            center: ['82.5%', '48%'],
            startAngle: 180,
            endAngle: 0,
            name: this.numbers.name,
            type: 'gauge',
            axisLabel: {
              show: false
            },
            detail: {
              show: true,
              formatter: this.data[2].value,
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: [0, '-35%']
            },

            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [this.data[2].value / this.data[2].max, '#B23AEE'],
                  [1, '#DCDCDC']
                ]
              }
            },
            pointer: {
              show: false
            },
            itemStyle: {
              color: '#DCDCDC'
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: [{
              value: this.data[2].value
            }]
          },
          {
            min: 0,
            max: this.data[2].max,
            radius: '52%',
            center: ['83%', '48%'],
            startAngle: 180,
            endAngle: 0,
            name: this.numbers.name,
            type: 'gauge',
            axisLine: { // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(255,255,255,0)']
                ]
              }
            }, // 仪表盘轴线
            axisLabel: { // 仪表盘上的数据
              show: false,
              color: '#ffffff' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: false,
              splitNumber: 10, // 刻度的段落数
              lineStyle: {
                color: '#fff',
                width: 1 // 刻度的宽度
              },
              length: -20 // 刻度的长度
            }, // 刻度样式
            splitLine: { // 文字和刻度的偏移量
              show: false,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#fff'
              }
            },
            detail: {
              show: true,
              formatter: this.data[2].title,
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: [0, '-125%']
            } // 分隔线样式
          },
          {
            center: ['17.4%', '95%'], // 仪表的位置
            name: '刻度', // 仪表的名字
            type: 'gauge', // 统计图类型为仪表
            radius: '53.3%', // 统计图的半径大小
            min: 0, // 最小刻度
            max: 200, // 最大刻度
            splitNumber: 1, // 刻度数量
            startAngle: 180, // 开始刻度的角度
            endAngle: 0, // 结束刻度的角度
            axisLine: { // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(255,255,255,0)']
                ]
              }
            }, // 仪表盘轴线
            axisLabel: { // 仪表盘上的数据
              show: true,
              color: '#ffffff' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: false,
              splitNumber: 10, // 刻度的段落数
              lineStyle: {
                color: '#fff',
                width: 1 // 刻度的宽度
              },
              length: -20 // 刻度的长度
            }, // 刻度样式
            splitLine: { // 文字和刻度的偏移量
              show: false,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#fff'
              }
            },
            detail: {
              show: true,
              formatter: '件',
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: ['-10%', '-1%']
            } // 分隔线样式
          },
          {
            min: 0,
            max: this.data[3].max,
            radius: '52%',
            center: ['16.2%', '95%'],
            startAngle: 180,
            endAngle: 0,
            name: this.numbers.name,
            type: 'gauge',
            axisLabel: {
              show: false
            },
            detail: {
              show: true,
              formatter: this.data[3].value,
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: [0, '-35%']
            },

            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [this.data[3].value / this.data[3].max, '#3A5FCD'],
                  [1, '#DCDCDC']
                ]
              }
            },
            pointer: {
              show: false
            },
            itemStyle: {
              color: '#DCDCDC'
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: [{
              value: this.data[3].value
            }]
          },
          {
            min: 0,
            max: this.data[3].max,
            radius: '52%',
            center: ['16.6%', '95%'],
            startAngle: 180,
            endAngle: 0,
            name: this.numbers.name,
            type: 'gauge',
            axisLine: { // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(255,255,255,0)']
                ]
              }
            }, // 仪表盘轴线
            axisLabel: { // 仪表盘上的数据
              show: false,
              color: '#ffffff' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: false,
              splitNumber: 10, // 刻度的段落数
              lineStyle: {
                color: '#fff',
                width: 1 // 刻度的宽度
              },
              length: -20 // 刻度的长度
            }, // 刻度样式
            splitLine: { // 文字和刻度的偏移量
              show: false,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#fff'
              }
            },
            detail: {
              show: true,
              formatter: this.data[3].title,
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: [0, '-125%']
            } // 分隔线样式
          },
          {
            center: ['50.6%', '95%'], // 仪表的位置
            name: '刻度', // 仪表的名字
            type: 'gauge', // 统计图类型为仪表
            radius: '53.3%', // 统计图的半径大小
            min: 0, // 最小刻度
            max: 200, // 最大刻度
            splitNumber: 1, // 刻度数量
            startAngle: 180, // 开始刻度的角度
            endAngle: 0, // 结束刻度的角度
            axisLine: { // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(255,255,255,0)']
                ]
              }
            }, // 仪表盘轴线
            axisLabel: { // 仪表盘上的数据
              show: true,
              color: '#ffffff' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: false,
              splitNumber: 10, // 刻度的段落数
              lineStyle: {
                color: '#fff',
                width: 1 // 刻度的宽度
              },
              length: -20 // 刻度的长度
            }, // 刻度样式
            splitLine: { // 文字和刻度的偏移量
              show: false,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#fff'
              }
            },
            detail: {
              show: true,
              formatter: '件',
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: ['-7%', '-1%']
            } // 分隔线样式
          },
          {
            min: 0,
            max: this.data[4].max,
            radius: '52%',
            center: ['49.5%', '95%'],
            startAngle: 180,
            endAngle: 0,
            name: this.numbers.name,
            type: 'gauge',
            axisLabel: {
              show: false
            },
            detail: {
              show: true,
              formatter: this.data[4].value,
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: [0, '-35%']
            },

            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [this.data[4].value / this.data[4].max, '#EE7621'],
                  [1, '#DCDCDC']
                ]
              }
            },
            pointer: {
              show: false
            },
            itemStyle: {
              color: '#DCDCDC'
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: [{
              value: this.data[4].value
            }]
          },
          {
            min: 0,
            max: this.data[4].max,
            radius: '52%',
            center: ['49.8%', '95%'],
            startAngle: 180,
            endAngle: 0,
            name: this.numbers.name,
            type: 'gauge',
            axisLine: { // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(255,255,255,0)']
                ]
              }
            }, // 仪表盘轴线
            axisLabel: { // 仪表盘上的数据
              show: false,
              color: '#ffffff' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: false,
              splitNumber: 10, // 刻度的段落数
              lineStyle: {
                color: '#fff',
                width: 1 // 刻度的宽度
              },
              length: -20 // 刻度的长度
            }, // 刻度样式
            splitLine: { // 文字和刻度的偏移量
              show: false,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#fff'
              }
            },
            detail: {
              show: true,
              formatter: this.data[4].title,
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: [0, '-125%']
            } // 分隔线样式
          },
          {
            center: ['83.8%', '95%'], // 仪表的位置
            name: '刻度', // 仪表的名字
            type: 'gauge', // 统计图类型为仪表
            radius: '53.3%', // 统计图的半径大小
            min: 0, // 最小刻度
            max: 200, // 最大刻度
            splitNumber: 1, // 刻度数量
            startAngle: 180, // 开始刻度的角度
            endAngle: 0, // 结束刻度的角度
            axisLine: { // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(255,255,255,0)']
                ]
              }
            }, // 仪表盘轴线
            axisLabel: { // 仪表盘上的数据
              show: true,
              color: '#ffffff' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: false,
              splitNumber: 10, // 刻度的段落数
              lineStyle: {
                color: '#fff',
                width: 1 // 刻度的宽度
              },
              length: -20 // 刻度的长度
            }, // 刻度样式
            splitLine: { // 文字和刻度的偏移量
              show: false,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#fff'
              }
            },
            detail: {
              show: true,
              formatter: '件',
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: ['-12%', '-1%']
            } // 分隔线样式
          },
          {
            min: 0,
            max: this.data[5].max,
            radius: '52%',
            center: ['82.5%', '95%'],
            startAngle: 180,
            endAngle: 0,
            name: this.numbers.name,
            type: 'gauge',
            axisLabel: {
              show: false
            },
            detail: {
              show: true,
              formatter: this.data[5].value,
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: [0, '-35%']
            },

            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [this.data[5].value / this.data[5].max, '#EE2C2C'],
                  [1, '#DCDCDC']
                ]
              }
            },
            pointer: {
              show: false
            },
            itemStyle: {
              color: '#DCDCDC'
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: [{
              value: this.data[5].value
            }]
          },
          {
            min: 0,
            max: this.data[5].max,
            radius: '52%',
            center: ['83%', '95%'],
            startAngle: 180,
            endAngle: 0,
            name: this.numbers.name,
            type: 'gauge',
            axisLine: { // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(255,255,255,0)']
                ]
              }
            }, // 仪表盘轴线
            axisLabel: { // 仪表盘上的数据
              show: false,
              color: '#ffffff' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: false,
              splitNumber: 10, // 刻度的段落数
              lineStyle: {
                color: '#fff',
                width: 1 // 刻度的宽度
              },
              length: -20 // 刻度的长度
            }, // 刻度样式
            splitLine: { // 文字和刻度的偏移量
              show: false,
              length: -20, // 便宜的长度
              lineStyle: {
                color: '#fff'
              }
            },
            detail: {
              show: true,
              formatter: this.data[5].title,
              color: '#00C6D5',
              fontSize: 15,
              offsetCenter: [0, '-125%']
            } // 分隔线样式
          }
        ]
      }
      window.addEventListener('resize', function () {
        this.$refs.pucircle.resize()
      })
    }
  }
</script>
<style>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
